<template>
    <div>
      <!-- 咨询列表根据type的不同 -->
        <div  style="margin-bottom: 10px;margin-top: 10px;">
            <el-input v-model="title"  placeholder="请输入法人姓名" suffix-icon="el-icon-search" style="width: 200px"
            @keyup.enter.native="loadPost"></el-input>
            <el-select v-model="status" placeholder="请选择状态" style="margin-left: 10px">
             <el-option
              v-for="item in statuss"
              :key="item.value"
              :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 会员 -->
  
            <el-select style="margin-left: 10px" v-model="tag" filterable placeholder="请选择是否为会员">
                <el-option
                        v-for="item in tags"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
       
            <el-button type="primary" style="margin-left: 10px" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="primary" style="margin-left: 10px" @click="add">新增</el-button>
        </div>
    <el-table :data="tableData"
    :header-cell-style="{background:'#f2f5fc',color:'#555'}" border>
        <el-table-column prop="id" label="ID" width="160">
        </el-table-column>
  
        <el-table-column prop="title" label="标题" width="160">
        </el-table-column>
   
        <el-table-column prop="tag" label="标签"  width="160" :formatter="tagFormate"></el-table-column>
    
  
        <el-table-column prop="status" label="状态"  width="160" :formatter="statusFormate">
        </el-table-column>
  
        <el-table-column prop="createUserName" label="创建人姓名"  width="160">
        </el-table-column>
  
        <el-table-column prop="createTime" label="创建时间"  width="160">
        </el-table-column>
  
        <el-table-column prop="updateUserName" label="修改人姓名"  width="160">
        </el-table-column>
  
        <el-table-column prop="updateTime" label="修改时间"  width="160">
        </el-table-column>
        
        <el-table-column prop="operate" label="操作">
            <template slot-scope="scope">
             <el-button size="small" type="primary" @click="mod(scope.row.id)">编辑</el-button>
             <el-button size="small" type="success" @click="dowm(scope.row)">下载附件</el-button>
          <el-button size="small" type="primary" @click="xq(scope.row.id)">详情</el-button>
          <template v-if="scope.row.status =='1'">
            <el-button size="small" type="danger" @click="unreleased(scope.row.id)">下架</el-button>
           </template>
           <template v-if="scope.row.status =='2'">
            <el-button size="small" type="success"  @click="release(scope.row.id)">发布</el-button>
           </template>
                
            <el-popconfirm
                        style="margin-left: 5px;"
                        title="这是一段内容确定删除吗？"
                        @confirm="del(scope.row.id)"
                >
                    <el-button slot="reference" size="small" type="danger">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
  
    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
  
        <el-dialog
  title="机构详情"
  :visible.sync="centerDialogVisiblexiangq"
  width="80%"
  center>
 <span><h2>{{xsDate.title}}</h2></span>
<p>  {{xsDate.content}}</p>
<p> <span>附件 </span> <span>{{xsDate.filePath}}</span></p>

  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisiblexiangq = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisiblexiangq = false">确 定</el-button>
  </span>
</el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="80%"
                center>
  <!--           //增加表单-->
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            
                <el-form-item label="标题" prop="title">
                        <el-input type="textarea" v-model="form.title"></el-input>
                </el-form-item>
  
                <el-form-item label="内容" prop="content">
                    <WangEditor @sendEditor="sendEditor" ref="myEditor"></WangEditor>
                </el-form-item>
  
               
                        <el-form-item label="标签">
                    <el-select v-model="form.tag" placeholder="请选择属于自己的标签">
                    <el-option label="环保科技1" value="1"></el-option>
                    <el-option label="环保科技2" value="2"></el-option>
                    <el-option label="环保科技3" value="3"></el-option>
                    <el-option label="环保科技4" value="4"></el-option>
                     </el-select>
                  </el-form-item>
               
  
                <el-form-item label="附件" prop="filePath">
                 <!-- 上传文件 -->
                 <el-upload
                     class="upload-demo"
                     action="http://localhost:9001/jk/notice/admin/uploadeditor"
                    :data={id:id}
                    :on-change="handleChange"
                    :limit="1"
                    :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <span style="margin-left:20px">{{form.filePath}}</span>
            </el-upload>
                </el-form-item>
            </el-form>
  
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="save">确 定</el-button>
              </span>
        </el-dialog>
    </div>
  </template>
  
  <script>
   import WangEditor from '@/views/editor/wangEditor.vue'
    export default {
        components:{
            WangEditor
        },
          name: "Statute",
          data() {
           
              return {
                  // 查询下拉框
                  statuss: [{
            value: -1,
            label: '全部状态'
          }, {
            value: 1,
            label: '已发布'
          }, {
            value: 2,
            label: '位发布'
          }],
          status: -1,
          tag:'',
          tags:[{
              value: '',
              label: '全部标签'
              }, {
                value: '1',
                label: '环保科技1'
                  },
                  {
                value: '2',
                label: '环保科技2'
                  },
                  {
                value: '3',
                label: '环保科技3'
                  },
                  {
                value: '4',
                label: '环保科技4'
                  }],
                  title:'',
                tableData: [],
                fileList:[],
                pageNum:1,
                pageSize:2,
                total:0,
                name:'',
                type:5,
                id:'',
                xsDate:[],
                MStype:1,
              centerDialogVisiblexiangq:false,
                  centerDialogVisible:false,
                  form:{
                      title:'',
                      content:'',
                      tag:'',
                      filePath:'',
                      type:5,
                  },
                  rules: {
                     
                      name: [
                          { required: true, message: '请输入名字', trigger: 'blur' },
                      ],
                     
  
                  }
  
              }
  
          },
          created(){
            this.session = JSON.parse(sessionStorage.getItem('CurUser'))
            this.form.createUserId=this.session.createUserId
            this.form.createUserName=this.session.createUserName
           
        },
          methods:{
            sendEditor(val){
                this.form.content = val.replace(/<[^>]+>/g,"")
            },
              // 显示状态
              statusFormate(row, index){
                if(row.status == 1){
                    return "已发布";
                }else{
                    return "未发布";
                }
            },
            // 显示标签
            tagFormate(row, index) {
                if (row.tag == 1) {
                     return "环保科技1";
                 } else if(row.tag == 2){
                    return "环保科技2";
                 }else if(row.tag == 3){
                    return "环保科技3";
                 } else {
                    return "环保科技4";
                 }
                },
              resetForm() {
                  this.$refs.form.resetFields();
              },
              mod(id){
              
              this.$axios.get(this.$httpUrl+'/jk/notice/admin/edit?id='+id).then(res=>res.data).then(res=>{
                this.MStype=2
                  if (res.resCode=="000000"){
              this.centerDialogVisible=true
              this.$nextTick(()=>{
                this.id=res.data.id
                  this.form.id = res.data.id
                  this.form.title = res.data.title
                  this.form.tag = res.data.tag
                  this.form.filePath = res.data.filePath
                  this.form.type=5
                  this.$refs.myEditor.editor.txt.html(res.data.content)
       
              })    
                  }else{
                  this.$message({
                  message: '操作失败',
                  type: 'error'
              });
                      }
                  })
          },
              // 删除
              del(id){
                  this.$axios.delete(this.$httpUrl+'/jk/notice/admin/remove?id='+id).then(res=>res.data).then(res=>{
  
                      if (res.resCode=="000000"){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });
                          //成功之后离开刷新页面
                          this.loadPost()
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }
  
                  })
  
              },
              add(){
  
                  this.centerDialogVisible=true
                  this.$nextTick(()=>{
                    this.MStype=1
                      this.resetForm()
                  //    这个在第一次的时候不能使用，所以需要nextTick异步
                  })
              },
              // 修改
              doMod(){
                  this.$axios.put(this.$httpUrl+'/jk/notice/admin/update',
                      this.form
  
                  ).then(res=>res.data).then(res=>{
  
                      if (res.resCode=="000000"){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });
                          //成功之后离开刷新页面
  
                          this.centerDialogVisible=false
                          this.loadPost()
                          // this.resetForm()
  
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }
  
                  })
              },
              // 增加保存
              doSave(){
                  this.$axios.post(this.$httpUrl+'/jk/notice/admin/add',
                      this.form
  
                  ).then(res=>res.data).then(res=>{
  
                      if (res.resCode=="000000"){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });
                          //成功之后离开刷新页面
  
                          this.centerDialogVisible=false
                          this.loadPost()
                          // this.resetForm()
  
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }
  
                  })
              },
              save(){
                  this.$refs.form.validate((valid) => {
                      if (valid) {
                          if (this.MStype==2){
                              this.doMod()
                          }else{
                              this.doSave()
                          }
  
                      } else {
                          console.log('error submit!!');
                          return false;
                      }
                  });
  
              },
              handleSizeChange(val) {
                  
                  this.pageNum=1
                  this.pageSize=val
                  this.loadPost()
              },
              handleCurrentChange(val) {
                  
                  this.pageNum=val
                  this.loadPost()
              },
              handleChange(file, fileList) {
                this.form.filePath=file.response
                var a=""+this.form.filePath
                this.form.id = a.slice(9,28)
                this.fileList = fileList.slice(-3);
            },
              resetParam(){
                  this.title='',
                  this.status=-1,
                  this.tag=''
                  
              },
              loadPost(){
               
                  this.$axios.get(this.$httpUrl+'/jk/notice/admin/list?type='+this.type+'&status='+this.status+'&tag='+this.tag+'&title='+this.title
                  +'&pagenum='+this.pageNum+'&pageSize='+this.pageSize
                    
                  ).then(res=>res.data).then(res=>{
                    console.log(res)
                    if (res.resCode=='000000'){
                          this.tableData=res.data.records
                          this.total=res.data.total
  
                      }else{
                          alert('获取数据失败')
                      }
  
                  })
              },
                 // 详情
            xq(id){
                this.centerDialogVisiblexiangq=true
                this.$axios.get(this.$httpUrl+'/jk/notice/admin/detail?id='+id).then(res=>res.data).then(res=>{
                    this.xsDate=res.data
                    if( this.xsDate.filePath!=='-' ){
                        var a=""+ this.xsDate.filePath
                    this.xsDate.filePath = a.slice(29)
                    }



                })
            },
            // 发布
            release(id){
                this.$axios.put(this.$httpUrl+'/jk/notice/admin/release?id='+id).then(res=>res.data).then(res=>{
                    console.log(res)
                    if (res.resCode=="000000"){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });                         
                                 
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }

                })
            },
            // 下架
            unreleased(id)
            { this.$axios.put(this.$httpUrl+'/jk/notice/admin/unreleased?id='+id).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.resCode=="000000"){
                          this.$message({
                              message: '操作成功',
                              type: 'success'
                          });                                
                      }else{
                          this.$message({
                              message: '操作失败',
                              type: 'error'
                          });
                      }

                })

            },
            dowm(row){
                console.log(row.filePath)
                if(row.filePath!='-')
                { window.location = "http://localhost:9001/jk/notice/admin/down?id=" + row.id;}
               else{

                this.$message({
                              message: '没有附件',
                              type: 'error'
                          });
               }
            
            },
          },
          beforeMount() {
              
              this.loadPost();
  
          }
      }
  </script>
  
  <style>
  
  </style>